<template>
    <el-form-item label="频道" prop="channelId">
      <el-select  placeholder="请选择频道" v-model="channelId" @change="hChange" clearable>
        <el-option
        v-for="channel in channelList"
        :key="channel.id"
        :label="channel.name"
        :value="channel.id"
        ></el-option>
      </el-select>
    </el-form-item>
</template>
<script>
export default {
  props: ['value'],
  data () {
    return {
      channelList: [], // 所有的频道
      channelId: this.value // 当前选中的频道
    }
  },
  created () {
    this.loadChannels()
  },
  // 由于父组件传给子组件只传到了value上，并没有传到子组件的数据项中，所以给value添加监听事件再把值赋值给数据项中。
  watch: {
    value: function (newVal, oldVal) {
      // 只要vaule变，数据项就会跟着改变
      this.channelId = newVal
    }
  },
  methods: {
    hChange () {
      console.log('用户修改了频道', this.channelId)
      this.$emit('input', this.channelId)
    },
    async loadChannels () {
      const res = await this.$http({
        method: 'get',
        url: '/mp/v1_0/channels'
      })
      this.channelList = res.data.data.channels
    }
  }
}
</script>
